<template>
    <div class="page-root">
        <div v-if="books">
            <h4 class="flag">阅读中</h4>
            <Bookrack v-for="i in 3" :key="i"></Bookrack>
            <h4 class="flag">已读完</h4>
            <BookListSecond
                class="cell"
                v-for="s in books"
                :books="s"
            >
                <template slot="line1">
                    <p class="description">{{s.author}}</p>
                </template>
                <template slot="line2">
                    <p class="description">18小时读完  81条标注</p>
                </template>
            </BookListSecond>
            <h4 class="flag">待阅读</h4>
            <BookListSecond
                    class="cell"
                    v-for="s,i in books"
                    :books="s"
            >
                <template slot="line1">
                    <p class="description">{{s.intro|strFunction}}</p>
                </template>
            </BookListSecond>
            <h4 class="flag guess-like">
                <span>猜你喜欢</span>
                <span class="change">换一换</span>
            </h4>
            <div class="recommend">
                <BookListFirst v-for="s,i in books" :books="s"></BookListFirst>
            </div>
        </div>
    </div>
</template>

<script>
    import Bookrack from "../components/Bookrack.vue";
    import BookListSecond from "../components/BookListSecond.vue"
    import BookListFirst from "../components/BookListFirst.vue"
    import {mapState} from "vuex";
    export default {
        name: "HomeBookrack",
        components:{
            Bookrack,
            BookListSecond,
            BookListFirst
        },
        computed:{
            ...mapState(["books"])
        },
        mounted(){
            this.$store.dispatch("getBooks")
        }
    }
</script>

<style scoped lang="less">
    .page-root{
        padding: 0 @s29;
    }
    .guess-like{
        display: flex;
        justify-content: space-between;
        .change{
            font-weight: normal;
            font-size: 3.5vw;
            color:#b1b1b1;
        }
    }
    .recommend{
        width: 82.1vw;
        margin: 5.3vw auto;
        display: flex;
        justify-content: space-between;
    }
    .cell{
        margin-bottom: 4.5vw;
    }
   

</style>